<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.min.css" />
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="dist/js/bootstrap.min.js"></script>
    <title>Sina Cloud</title>
    <style type="text/css">
      /* 轮播图 */
      .carousel {
        height: 500px;
        margin-bottom: 60px;
      }
      .carousel .item {
        height: 500px;
        background-color: #000;
      }
      .carousel .item img {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <!--导航栏-->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button
            class="navbar-toggle"
            data-toggle="collapse"
            data-target="#example-navbar-collapse"
          >
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="#" class="navbar-brand">新浪云</a>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                首页
              </a>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                最新活动
              </a>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                产品
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li><a href="#">云应用SAE</a></li>
                <li><a href="#">云虚拟主机</a></li>
                <li><a href="#">云储存SCS</a></li>
                <li><a href="#">MySQL服务</a></li>
                <li><a href="#">Redis服务</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                企业版
              </a>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                支持中心
              </a>
            </li>
            <li class="dropdown">
              <a href="#" data-toggle="modal" data-target="#myModal">
                问题与帮助
              </a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <!--轮播图-->
    <div
      class="carousel slide"
      data-ride="carousel"
      data-interval="2000"
      id="b"
    >
      <!--小圆点-->
      <ol class="carousel-indicators">
        <li data-target="#b" data-silde-to="0" class="active"></li>
        <li data-target="#b" data-silde-to="1"></li>
        <li data-target="#b" data-silde-to="2"></li>
      </ol>
      <!--轮播项-->
      <div class="carousel-inner">
        <div class="item active">
          <img src="img/1.jpeg" />
        </div>
        <div class="item">
          <img src="img/2.png" />
        </div>
        <div class="item">
          <img src="img/3.png" />
        </div>
      </div>
      <!--左右箭头-->
      <a
        href="#b"
        class="left carousel-control"
        role="button"
        data-slide="prev"
      >
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a
        href="#b"
        class="right carousel-control"
        role="button"
        data-slide="next"
      >
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
    </div>

    <!--模态框-->
    <div class="container">
      <div
        class="modal fade"
        id="myModal"
        tabindex="-1"
        role="dialog"
        aria-labelledby="myModalLabel"
        aria-hidden="true"
      >
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button class="btn close" data-dismiss="modal" aria-hidden="true">
                &times;
              </button>
              <h4 class="modal-title" id="myModalLabel">问题与帮助</h4>
            </div>
            <div class="modal-body">
              <p>
                新浪云是新浪网技术（中国）有限公司旗下网站。我们对外的主要产品包括应用云平台Sina
                App
                Engine（简称SAE）、企业云服务、MAE私有云解决方案、云虚拟主机、容器云等多种云计算服务，全面覆盖了laaS、PaaS、SaaS层的各种需求
              </p>
            </div>
            <div class="modal-footer">
              <button class="btn btn-success" data-dismiss="modal">关闭</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--缩略图 1-->
    <div class="container">
      <div class="row">
        <div class="col-sm-3">
          <a href="#" class="thumbnail">
            <img src="img/4.png" class="img-left" />
            <p class="text-right"><a href="#">免费迁移指导</a></p>
            <p>5分钟新手轻松上云无压力</p>
          </a>
        </div>
        <div class="col-sm-3">
          <a href="#" class="thumbnail">
            <img src="img/5.png" class="img-left" />
            <p class="text-right"><a href="#">至尊专业服务</a></p>
            <p>免费咨询企业版特权</p>
          </a>
        </div>
        <div class="col-sm-3">
          <a href="#" class="thumbnail">
            <img src="img/6.png" class="img-left" />
            <p class="text-right"><a href="#">招募合作伙伴</a></p>
            <p>加入新浪云合作伙伴计划</p>
          </a>
        </div>
        <div class="col-sm-3">
          <a href="#" class="thumbnail">
            <img src="img/7.png" class="img-left" />
            <p class="text-right"><a href="#">入驻云市场</a></p>
            <p>繁荣云计算行业生态圈</p>
          </a>
        </div>
      </div>
    </div>

    <hr />

    <!--缩略图 2-->
    <div class="container">
      <h3 class="text-center">安全可靠的云计算服务，满足你所有需求</h3>
      <div class="row">
        <div class="col-sm-3">
          <a href="#" class="thumbnail">
            <h3 class="text-center">弹性计算</h3>
            <p align="center">
              毫秒级动态伸缩弹性扩容，智能负载均衡，支持分布式系统本地读写
            </p>
            <p class="text-left"><img src="img/8.png" /></p>
            <p class="text-right">云空间</p>
            <p class="text-right">云容器</p>
            <p class="text-right">标准环境</p>
            <p class="text-right">云虚拟主机</p>
          </a>
        </div>
        <div class="col-sm-3">
          <a href="#" class="thumbnail">
            <h3 class="text-center">数据库与缓存</h3>
            <p align="center">
              高性能、高可靠、高性价比，分布式环境下的原生数据库
            </p>
            <p class="text-left"><img src="img/9.png" /></p>
            <p class="text-right">MySQL</p>
            <p class="text-right">KVDB</p>
            <p class="text-right">Redis</p>
            <p class="text-right">MongoDB</p>
            <p class="text-right">Memcached</p>
            <p class="text-right">Elasticsearch</p>
          </a>
        </div>
        <div class="col-sm-3">
          <a href="#" class="thumbnail">
            <h3 class="text-center">存储</h3>
            <p align="center">海量存储服务，无限量存储分发</p>
            <p class="text-left"><img src="img/10.png" /></p>
            <p class="text-right">云存储</p>
            <p class="text-right">Storage</p>
            <p class="text-right">CDN</p>
          </a>
        </div>
        <div class="col-sm-3">
          <a href="#" class="thumbnail">
            <h3 class="text-center">网络与安全</h3>
            <p align="center">
              全方位多层面细粒度监测与防护，确保应用时刻安全无懈可击
            </p>
            <p class="text-left"><img src="img/11.png" /></p>
            <p class="text-right">DDoS防火墙</p>
            <p class="text-right">应用防火墙</p>
            <p class="text-right">VPN隧道</p>
            <p class="text-right">应用体检</p>
          </a>
        </div>
      </div>
    </div>

    <!--缩略图 3-->
    <div class="container">
      <div class="row">
        <div class="col-sm-3">
          <a href="#" class="thumbnail">
            <h3 class="text-center">通信</h3>
            <p align="center">
              卓越的分布式通信服务，承载亿级用户，实时通信高效无延迟
            </p>
            <p class="text-left"><img src="img/12.png" /></p>
            <p class="text-right">云推送</p>
            <p class="text-right">云邮件</p>
            <p class="text-right">Channel</p>
            <p class="text-right">短信服务</p>
          </a>
        </div>
        <div class="col-sm-3">
          <a href="#" class="thumbnail">
            <h3 class="text-center">应用程序</h3>
            <p align="center">
              解决一切性能瓶颈，程序运行效率倍增，高性能应用程序必备服务
            </p>
            <p class="text-left"><img src="img/13.png" /></p>
            <p class="text-right">定时任务</p>
            <p class="text-right">任务队列</p>
            <p class="text-right">后台进程</p>
            <p class="text-right">Web性能分析</p>
          </a>
        </div>
        <div class="col-sm-3">
          <a href="#" class="thumbnail">
            <h3 class="text-center">大数据</h3>
            <p align="center">
              联合新浪财经提供成熟稳定的权威高质量无延迟的金融大数据
            </p>
            <p class="text-left"><img src="img/14.png" /></p>
            <p class="text-right">实时股票查询</p>
            <p class="text-right">股票历史数据</p>
            <p class="text-right">财经基本面数据</p>
          </a>
        </div>
        <div class="col-sm-3">
          <a href="#" class="thumbnail">
            <h3 class="text-center">其他</h3>
            <p align="center">
              凭借强大且深厚的PaaS技术积累，针对业务场景提供高级云服务
            </p>
            <p class="text-left"><img src="img/15.png" /></p>
            <p class="text-right">云直播</p>
            <p class="text-right">云邮箱</p>
            <p class="text-right">云市场</p>
          </a>
        </div>
      </div>
    </div>

    <hr />

    <!--底部-->
    <div class="container">
      <div>
        <h3 class="text-center">零基础也可立即轻松上云无门槛</h3>
        <p align="center">不写一行代码，两分钟一键生成属于你的高质量网站</p>
        <p align="center"><button class="btn btn-info">立即使用</button></p>
      </div>
    </div>

    <hr />
  </body>
</html>
